<template>
	<!-- 辅助控制组件 -->
	<view class="container">
		<!-- <view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view> -->
		<!-- 门 照明 -->
		<view class="facility-item" @tap="closeOpen" v-for="(item, index) in facilityList" :key="index" v-if="item.type !== 3">
			<view class="facility-list bg-color" :class="[item.status == 0 ? 'green-color': '']">
				<!-- 左侧图片 -->
				<view class="facility-img">
					<image class="green-color" :src="doorOpenImg" v-if="item.type == 1 && item.status == 0"></image>
					<image :src="doorCloseImg" v-if="item.type == 1 && item.status == 1"></image>
					<image class="green-color" :src="bulbOpenImg" v-if="item.type == 2 && item.status == 0"></image>
					<image :src="bulbCloseImg" v-if="item.type == 2 && item.status == 1"></image>
					<image :src="airTempImg" v-if="item.type == 3 && item.status == 0"></image>
					<image :src="airColdImg" v-if="item.type == 3 && item.status == 1"></image>
					<image :src="airHotImg" v-if="item.type == 3 && item.status == 2"></image>
				</view>
				<!-- 中间描述 -->
				<view class="facility-desc">
					<view class="facility-name margin8">
						{{item.name}}
					</view>
					<view class="facility-time-status">
						<view class="facility-time grey-color font22">{{item.time}}</view>
						<!-- <view class="facility-status-text" :class="[item.status == 0 ? 'green-color': '']">{{item.status == 0 ? '打开' : '关闭'}}</view> -->
					</view>
				</view>
				<!-- switch按钮 -->
				<view class="facility-status">
					<view class="status-text">
						{{item.status == 0 ? '打开' : '关闭'}}
						<!-- {{switchStatus}} -->
					</view>
					<!-- switchChange -->
					<switch color="#1DD3B8" :checked="item.status == 0" @change="switchChange" />
				</view>
			</view>
		</view>
		<!-- 空调 -->
		<view class="facility-item" v-for="(item, index) in facilityList" :key="index" v-if="item.type == 3">
			<view class="facility-list bg-color green-color">
				<!-- 左侧图片 -->
				<view class="facility-img">
					<image :src="airTempImg" v-if="item.module == 1"></image>
					<image :src="airColdImg" v-if="item.module == 2 && item.status == 1"></image>
					<image :src="airHotImg" v-if="item.module == 2 && item.status == 2"></image>
				</view>
				<!-- 中间描述 -->
				<view class="facility-desc">
					<view class="facility-name margin8">
						{{item.name}}
					</view>
					<view class="facility-time-status">
						<view class="facility-time grey-color font22">{{item.time}}</view>
					</view>
				</view>
				<!-- setting -->
				<view class="facility-status">
					<view class="status-text" :class="[item.status == 2 ? 'red-color': 'green-color']">
						{{item.des}}
					</view>
					<view class="iconfont icon-setting icon" @tap="settingClick(item)">

					</view>
				</view>
			</view>
		</view>
		<!-- picker视图 -->
		<view class="setting-picker" v-if="isOpenPicker">
			<view class="setting-title" v-if="settingItem.module == 1">空调温度设置</view>
			<view class="setting-title" v-if="settingItem.module == 2">空调模式设置</view>
			<view class="settingChange flexColumn" v-if="settingItem.module == 1">
				<!-- 温度 -->
				<view class="temp-num">
					{{temperature}}℃
				</view>
				<!-- slider -->
				<view class="setting-slider">
					<image :src="declineIcon" @tap="reduceTemp"></image>
					<slider :value="temperature" min="16" max="30" @change="sliderChange" activeColor="#1dd3b8" block-color="#1dd3b8" block-size="20" />
					<image :src="addIcon" @tap="addTemp"></image>
				</view>
			</view>
			<view class="settingChange flexRow" v-if="settingItem.module == 2">
				<!-- 模式改变 -->
				<view class="setting-module">
					<!-- 制冷 -->
					<view class="setting-cold" v-if="settingItem.status == 1">
						<!-- 左边制冷图片 -->
						<image :src="setColdActiveImg" v-if="coldActive"></image>
						<image :src="setColdImg" @tap="setColdActive" v-else></image>
						<!-- 右边制热图片 -->
						<image :src="setHotImg" @tap="setHotActive" v-if="coldActive"></image>
						<image :src="setHotActiveImg" v-else></image>
					</view>
					<!-- 制热 -->
					<view class="setting-cold" v-if="settingItem.status == 2">
						<image :src="setColdImg" @tap="setColdActive" v-if="hotActive"></image>
						<image :src="setColdActiveImg" v-else></image>
						<image :src="setHotActiveImg" v-if="hotActive"></image>
						<image :src="setHotImg" @tap="setHotActive" v-else></image>
						
					</view>
				</view>
			</view>
			<view class="settingBtn" @tap="onConfirm">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			isPicker: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				facilityList: [],
				doorOpenImg: '../../static/image/facility/door-active.png',
				doorCloseImg: '../../static/image/facility/door.png',
				bulbOpenImg: '../../static/image/facility/bulb-active.png',
				bulbCloseImg: '../../static/image/facility/bulb.png',
				airTempImg: '../../static/image/facility/temp-active.png',
				airColdImg: '../../static/image/facility/air-cold.png',
				airHotImg: '../../static/image/facility/air-hot.png',
				setColdImg: '../../static/image/facility/set-cold.png',
				setColdActiveImg: '../../static/image/facility/set-cold-active.png',
				setHotImg: '../../static/image/facility/set-hot.png',
				setHotActiveImg: '../../static/image/facility/set-hot-active.png',
				addIcon: '../../static/image/facility/add-icon.png',
				declineIcon: '../../static/image/facility/decline-icon.png',
				switchStatus: '打开',
				isOpenPicker: '',
				temperature: 26,
				tempSetting: false,		// 空调温度设置
				moduleSetting: false,	// 空调模式设置
				hotActive: false,
				coldActive: true,
				settingItem: {}
			}
		},
		created() {
			this.facilityList = this.list
		},
		// watch: {
		// 	isOpenPicker(newVal, oldVal) {
		// 		this.isOpenPicker = newVal
		// 		console.log('new', newVal, oldVal)
		// 	}
		// },
		methods: {
			// 打开/关闭切换
			switchChange(e) {
				if (e.target.value) {
					this.switchStatus = '关闭'
				} else {
					this.switchStatus = '打开'
				}
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
			// 空调设置按钮
			settingClick(e) {
				this.$emit('click', this.isOpenPicker)
				this.isOpenPicker = true
				this.settingItem = e
				this.temperature = parseInt(e.des)
				console.log('setting-item', e)
			},
			// 激活制热模式
			setHotActive() {
				this.coldActive = false
				this.hotActive = true
			},
			// 激活制冷模式
			setColdActive() {
				this.coldActive = true
				this.hotActive = false
			},
			// 设置确定
			onConfirm() {
				this.isOpenPicker = false
				this.$emit('onConfirm', this.isOpenPicker)
			},
			sliderChange(e) {
				this.temperature = e.detail.value
				console.log('slider value 发生变化：' + e.detail.value)
			},
			// 减少温度
			reduceTemp() {
				if(this.temperature <= 16) return
				this.temperature--
			},
			// 增加温度
			addTemp() {
				if(this.temperature >= 30) return
				this.temperature++
			},
			// 关闭picker
			closeOpen() {
				this.isOpenPicker = false
			}
		}
	}
</script>

<style lang="scss">
	@import 'iconfont.css';

	.container {
		.facility-item {
			margin-bottom: 10rpx;
			white-space: nowrap;
			padding: 0 24rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			.font22 {
				font-size: 22rpx;
			}

			.margin8 {
				margin-bottom: 8rpx;
			}

			.facility-title {
				font-size: 36rpx;
				color: #333;
			}

			.facility-list {
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 140rpx;
				font-size: 32rpx;
				color: #999;
				padding: 0 24rpx;

				.facility-img {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
				}

				.facility-desc {
					display: flex;
					flex-direction: column;
					margin-left: 24rpx;
					width: 100%;
					float: left;
				}

				.facility-status {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					margin-left: 24rpx;
					float: left;

					switch,
					.icon {
						margin-left: 24rpx;
					}

					.icon {
						margin-right: 24rpx;
					}
				}

			}


			.bg-color {
				background-color: #fff;
				border-radius: 10rpx;
			}

			.green-color {
				color: #1DD3B8;
			}

			.red-color {
				color: #FF7547;
			}

			.grey-color {
				color: #999;
			}
		}

		.setting-picker {
			display: flex;
			flex-direction: column;
			height: 527rpx;
			width: calc(100% - 48rpx);
			position: fixed;
			bottom: 0;
			background-color: #f4f4f4;
			padding: 0;
			margin: 0;
			padding: 0 24rpx;

			.setting-title {
				height: 92rpx;
				line-height: 92rpx;
				font-size: 36rpx;
				color: #333;
				margin-left: 14rpx;
				font-weight: bold;
			}

			.settingChange {
				background-color: #fff;
				height: 235rpx;
				border-radius: 10rpx;
				&.flexColumn {
					display: flex;
					align-items: center;
					flex-direction: column;
				}
				&.flexRow {
					display: flex;
					align-items: center;
					flex-direction: row;
					justify-content: center;
				}
				.temp-num {
					display: flex;
					color: #1DD3B8;
					font-size: 60rpx;
					text-align: center;
					align-items: center;
					flex: 1;
				}

				.setting-slider {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex: 1;

					image {
						width: 48rpx;
						height: 48rpx;
					}

					image:first-child,
					image:last-child {
						float: left;
					}

					slider {
						width: 462rpx;
						float: left;
					}
				}
				// 空调模式设置
				.setting-module {
					
					align-items: center;
					padding: 0 120rpx;
					.setting-cold {
						image:first-child {
							margin-right: 142rpx;
						}
					}
					image {
						width: 160rpx;
						height: 160rpx;
					}
				}
			}

			.settingBtn {
				margin-top: 40rpx;
				height: 88rpx;
				background: #1dd3b8;
				border-radius: 44rpx;
				color: #fff;
				line-height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				text-align: center;
			}

		}
	}
</style>
